 <!DOCTYPE html>
 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>filter过滤器以及样式变换</title>
  <style>
    .sha{
      height: 150px;
      width: 150px;
    }
    .c{
      background: red;
    }
    .d{
      background: green;
    }
    .f{
      font-size: 18px;
    }
    .w{
      font-weight: 900;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 过滤器 msg传入'upperCase'过滤器运算后,再返回 可用多个筛选器 -->
  <p>{{ msg | upperCase(true) }}</p>
  <p>{{ msg | upperCase | upperCase(true) }}</p>

  <!-- 绑定内联样式 style和v-bind:style最终页面上会放在同一个style上 -->
  <div style="height: 200px;width: 200px;" :style="{background:'red',height:'250px'}"></div>
  <p :style="{color:col}" v-on:click="onchange">动态绑定行内样式,点击改变</p>
  <p :style="oStyle">绑定属性对象</p>
  <p :style="style2">使用计算属性,可实现一个点击事件,改多个行内样式。点击事件激活后col值改变,被监听了,此元素也会动态改变样式</p>
  <p :style="[style2,style3,{background:'red'}]">绑定两个计算属性和其他属性</p>

  <!-- 绑定class -->
  <div v-for="i in changeClass" class="sha"
       :class="{c:i.ifRound,d:!i.ifRound}">
    通过隐藏或显示某些类来改变,key是类名,value是显示与否
  </div>
  <div v-for="i in chaClass" class="sha"
       :class="[ i.ifRound, i.font?i.font : i.width,{w:i.width}]">
    通过改变类的值来实现,每一项数组成员都是一个类名
  </div>

  <!-- 自定义指令 -->
  <div v-cxp>这是自定义指令,不指定值时的效果</div>
  <div v-cxp="'color:blue'">这是自定义指令,指定值时的效果</div>
  <div v-cxp:xsf="'color:gray'">这是自定义指令,这是跟着其他修饰符的效果</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
      msg: 'I love you!',
      col:"blue",
      oStyle:{
        color:'pink',
        fontWeight :"bolder"
      },
      changeClass:[
        {ifRound:true},
        {ifRound:false}
      ],
      chaClass:[
        {ifRound:'c',font:'f'},
        {ifRound:'d',font:'f',width:'w'}
      ]
    },
    // 过滤器 筛选数据,first调用时传入的参数从第二个开始 upperCase(xx)
    filters:{
      upperCase:function (val,ifFirst) { // val默认传进来的值
        val = val.toString();
        if(ifFirst){  // 如果有传参数 截取第一个字符大写 + 截取第一个字符后面的所有字符
          return val.charAt(0).toUpperCase() + val.slice(1);
        }else{
          return val.toUpperCase();
        }
      }
    },
    methods:{
      onchange:function () {
        if(this.col === 'blue')
          this.col = 'yellow';
        else
          this.col = 'blue';
      }
    },
    computed:{
      style2: function () {
        return {
          color : this.col
        }
      },
      style3:function () {
        return{
          textAlign: 'center'
        }
      }
    },
    // 自定义指令
    directives:{
      // bind 只调用一次，指令第一次绑定到元素时调用
      // inserted 当被绑定的元素插入到DOM中时
      // update 所在组件的VNode更新时调用,但可能发生在其子VNode更新之前
      // componentUpdated 指令所在组件的VNode及其子VNode全部更新后调用。
      // unbind 只调用一次，指令与元素解绑时调用。
      cxp:{ // 指令名字
        // el 绑定的属性
        // binding 一个对象,包含以下属性：
        //   name:指令名,不包括 v- 前缀。
        //   value:指令的绑定值,例如:v-my-directive="2" 中,绑定值为 2。
        //   oldValue:指令绑定的前一个值,仅在update和componentUpdated钩子中可用,无论值是否改变都可用
        //   expression:字符串形式的指令表达式,例如v-my-directive="1+1"中,表达式为"1+1"
        //   arg:传给指令的参数,可选,例如v-my-directive:foo中,参数为"foo"。
        //   modifiers:一个包含修饰符的对象,例如:v-my-directive.foo.bar中,修饰符对象为{foo:true,bar:true }
        // vnode Vue 编译生成的虚拟节点。移步VNode API来了解更多详情。
        // oldVnode 上一个虚拟节点,仅在update和componentUpdated钩子中可用
        bind: function (el,binding,vndoe) { // 钩子函数
          el.style = binding.value || "color:red" ;
          console.log(binding) // xsf为修饰符
        }
      }
    }
  })

  // 自定义指令(全局) `v-focus`
  Vue.directive('focus', {
    inserted: function (el) {
      el.focus()
    }
  })
  
  // 过滤器(全局) {{msg | glq}}
  Vue.filter("glq",function(value){
    return value+'glq'
  })
</script>
</body>
</html>